<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/front/plugins/element-ui/index.css">
  <title>Document</title>
  <style>
      .el-carousel__item h3 {
          color: #475669;
          font-size: 14px;
          opacity: 0.75;
          line-height: 150px;
          margin: 0;
      }

      .el-carousel__item:nth-child(2n) {
          background-color: #99a9bf;
      }

      .el-carousel__item:nth-child(2n+1) {
          background-color: #d3dce6;
      }

      ul {
          display: flex;
          list-style: none;
      }

      ul li {
          flex: 1;
          background-color: red;
          margin: 5px;
      }
  </style>
</head>
<body>
<div class="block" id="app">
  <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
  <el-dialog
          title="支付信息"
          :visible.sync="dialogVisible"
          width="30%">
    <div style="margin: 10px;color: red;">请核对您的订单信息</div>
    <span style="margin: 10px;">收货地址：</span>
    <el-select v-model="value" placeholder="请选择">
      <el-option
              v-for="item in addresses"
              :key="item.value"
              :label="item.label"
              :value="item.value">
      </el-option>
    </el-select>
    <div style="margin: 10px;">订单信息</div>
    <div style="margin: 10px;" v-for="item in order">
      <div style="display: flex;flex-direction: row;width:100%;border:2px solid #f6f6f6;border-radius: 10px;">
        <div style="height: 100px;width: 100px;display: flex;
        align-items: center;
        justify-content: center;margin-left: 5px;">
          <img :src="baseurl+item.image"
               style="height: 95px;width: 95px;border: black 3px;border-radius: 10px;margin-right: 5px">
        </div>
        <div style="height: 100px;width: 350px;margin-top: 5px;">
          <div style="height: 30px;">
            <span>收货人：{{item.consignee}}</span>
          </div>
          <div style="height: 70px;">{{item.goodsName}}</div>
        </div>
        <div style="height: 100px; width: 50px;display: flex;
        align-items: center;
        justify-content: center;">
          <span>{{item.amount}}件</span>
        </div>
        <div style="height: 100px;width: 50px;display: flex;
        align-items: center;
        justify-content: center;">
          <span>{{item.price}}</span>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">立即支付</el-button>
    </span>
  </el-dialog>
  <h1>

  </h1>
</div>
</body>
<script src="/backend/plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="/backend/plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="/backend/plugins/axios/axios.min.js"></script>
<script src="/backend/js/request.js"></script>
<script src="/backend/api/login.js"></script>
<script src="/front/api/index.js"></script>
<script src="/backend/api/user.js"></script>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                nowPayStatus: 0,
                dialogVisible: false,
                addresses: [],
                value: '',
                key: 1,
                id: 1,
                baseurl: 'http://localhost:8080/front/images/goods/',
                order: [
                    {
                        consignee: '庄朔',
                        address: '河北大学',
                        image: '10010.jpg',
                        goodsName: '酒',
                        amount: '1',
                        price: '1999'

                    },
                    {
                        consignee: '庄朔',
                        address: '河北大学',
                        image: '10011.jpg',
                        goodsName: '酒',
                        amount: '1',
                        price: '1999'

                    }
                ]
            }
        },
        mounted() {
            this.handleQueryAddress()
        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭支付？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            async handleQueryAddress() {
                await queryAddressByUserId(this.id).then(res => {
                    if (String(res.code) === '1') {
                        const addressArray = res.data;
                        this.addresses = addressArray.map(address => {
                            const [value, label] = [this.key, address];
                            this.key++;
                            return {value, label};
                        });
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
                if (this.nowPayStatus === 1) {

                }
            }
        }
    })

</script>
</html>
